<template>
  <div>
    <my-tabs :tab-list="tabList">
      <template v-slot="{ row }">
        <li
          class="item pointer"
          :class="{ active: routePath === row.path }"
          @click="handleClickMenu(row)"
        >
          {{ row.title }}
        </li>
      </template>
    </my-tabs>
    <transition name="fade-transform" mode="out-in">
      <router-view />
    </transition>
  </div>
</template>

<script>
import MyTabs from '../../components/myTab.vue'
export default {
  components: {
    MyTabs
  },
  data() {
    return {
      tabList: [
        {
          path: '/my/study/course/video',
          title: '点播'
        },
        {
          path: '/my/study/course/live',
          title: '直播'
        },
        {
          path: '/my/study/course/classes',
          title: '班级'
        }
      ]
    }
  },
  computed: {
    routePath() {
      return this.$route.path
    }
  },
  methods: {
    handleClickMenu(data) {
      this.$router.push({
        path: data.path
      })
    }
  }
}
</script>

<style></style>
